<template>
	<view class="footer-bar">
		<view class="bar-left" @click="$emit('toggle-selected-list')">
			<view class="cart">
				<view class="total-num">{{ totalNum }}</view>
				<u-icon class="cart-icon" name="shopping-cart-fill" size="46rpx"></u-icon>
			</view>
			<view class="total">合计：<text class="total-price">￥{{ totalPrice }}</text></view>
		</view>
		<button class="submit-btn" @click="$emit('submit')">提交</button>
	</view>
</template>

<script>
	export default {
		name: 'FooterBar',
		props: {
			totalNum: {
				type: Number,
				default: 0
			},
			totalPrice: {
				type: [String, Number],
				default: '0.00'
			}
		}
	}
</script>

<style scoped>
	.footer-bar {
		display: flex;
		align-items: center;
		background: #fff;
		padding: 24rpx 32rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-shadow: 0 -2rpx 8rpx #eee;
		height: 130rpx;
	}

	.bar-left {
		display: flex;
		flex: 1;
	}

	.cart {
		position: relative;
	}

	.total-num {
		position: absolute;
		left: 45%;
		top: -10%;
		color: #fff;
		background: rgb(218, 39, 39);
		border-radius: 50%;
		padding: 0 8rpx;
		font-size: 18rpx;
		z-index: 1;
	}

	.cart-icon {
		margin-right: 10rpx;
		color: #1cb7d6;
		position: relative;
		z-index: 0;
	}

	.total {
		flex: 1;
		font-size: 28rpx;
		color: #222;
	}

	.total-price {
		color: #ff5a5f;
		font-weight: bold;
	}

	.submit-btn {
		background: #1ec6e6;
		color: #fff;
		border: none;
		border-radius: 40rpx;
		font-size: 30rpx;
		padding: 0 48rpx;
	}
</style>